<template>
  <div>
    <project-header :is-border="isBorder"></project-header>
    <div class="title">144 people are supporting Steve Lloyd</div>
    <div class="body">
      <div class="ul-left ul-box floatLeft">
        <div class="ul-title">
          <span class="block">Where Backers Come From</span>
          <span class="block">Top Cities</span>
        </div>
        <ul>
          <li v-for="item in ulLeft">
            <span class="start lineBlock">{{item.start}}</span>
            <span class="end lineBlock">{{item.end}}</span>
            <span class="backer lineBlock">12 backers</span>
          </li>
        </ul>
      </div>
      <div class="ul-right ul-box floatLeft">
        <div class="ul-title">
          <span class="block">Where Backers Come From</span>
          <span class="block">Top Cities</span>
        </div>
        <ul>
          <li v-for="item in ulRight">
            <span class="start lineBlock">{{item}}</span>
            <span class="backer lineBlock">12 backers</span>
          </li>
        </ul>
      </div>
      <div class="clear"></div>
      <div class="back">
        <div class="back-left back-box floatLeft">
          <span class="block">New Backers</span>
          <span class="block">17</span>
          <span class="block">backers had never backed a project on Kickstarter before</span>
        </div>
        <div class="back-right back-box floatLeft">
          <span class="block">Returning Backers</span>
          <span class="block">127</span>
          <span class="block">backers had backeda project on Kickstarter before</span>
        </div>
        <div class="clear"></div>
      </div>

      <div class="roll">
        <span class="block">Roll call!</span>
        <span class="block">Here are a few of the people supporting Chroma - The unique,4x5 technical camera</span>
        <div class="message">
          <div class="roll-box floatLeft" v-for="item in num">
            <div class="people-cricle">
              <span class="block"></span>
            </div>
            <span class="aisbaby block">aisbaby</span>
            <span class="num block">Backed 40 projects</span>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <button>See more!</button>
    </div>
  </div>
</template>

<script>
  import projectHeader from '../public/ProjectHeader'

    export default {
        name: "project-detail-community",
        components:{ projectHeader },
        data(){
            return{
              ulLeft:[
                { start:'London', end:'United Kindom' },{ start:'Singapore', end:'Singapore' },{ start:'Singapore', end:'Singapore' },{ start:'Singapore', end:'Singapore' },{ start:'Hong Kong', end:'Hong Kong' },
                { start:'Hong Kong', end:'Hong Kong' },{ start:'Hong Kong', end:'Hong Kong' },{ start:'Hong Kong', end:'Hong Kong' },{ start:'Hong Kong', end:'Hong Kong' },{ start:'Hong Kong', end:'Hong Kong' },
              ],
              ulRight:['United Kindom','Singapore','Germany', 'Germany','Germany', 'Germany','Germany','Germany','Germany','Germany'],
              num:[ '', '', '', '', '', '', '', '' ],
                isBorder:[ false, false, false, false, true ]
            }
        }
    }
</script>

<style scoped lang="scss">
  .floatLeft{float: left}
  .clear{clear: both}
  .block{display: block}
  .lineBlock{display: inline-block}
   .title{
     text-align: center;
     box-shadow: 0 -1px 0px 0 #DBDEDD;
     line-height: 335px;
     font-family: PingFangSC-Regular;
     font-size: 20px;
     color: #2E2E2E;
     letter-spacing: 0.3px;
   }
   .body{box-shadow: 0 -1px 0px 0 #DBDEDD;}
  .ul-box{
    width: 476px;
    padding-top: 52px;
    vertical-align: middle;
    box-sizing: border-box;
    span:nth-child(2){margin: 4px 0 1px 0;}
    .ul-title{
      text-align: center;
      font-family: PingFangSC-Regular;
      font-size: 20px;
      color: #2E2E2E;
      letter-spacing: 0.3px;
      border-bottom: 1px solid #DBDEDD;
    }
    ul{
      padding-top: 20px;
      box-sizing: border-box;
      li{
        list-style: none;
        margin-top: 15px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #2C59F6;
        span:nth-child(2){
          font-size: 12px;
          margin-left:18px;
        }
        .backer{
          font-size: 12px;
          color: #2E2E2E;
          float: right;
        }
      }
    }
  }
  .ul-left{
    margin:0 85px 0 200px;

  }
  .back{
    width:1040px;
    height: 390px;
    border: 1px solid #DBDEDD;
    margin:105px 0 0 200px;
    .back-box{
      height: 285px;
      margin-top:52.5px;
      width:518px;
      text-align: center;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #2E2E2E;
      span:nth-child(1){
        font-family: PingFangSC-Medium;
        letter-spacing: -0.4px;
      }
      span:nth-child(2){
        font-size: 100px;
        height: 140px;
        margin: 42px 0;
      }
      span:nth-child(3){
        color: #666666;
        letter-spacing: -0.2px;
        line-height: 21px;
        width: 234px;
        margin: 0 auto;
      }
    }
    .back-left{border-right: 2px solid #DBDEDD;}
  }
  .roll{
    text-align: center;
    span:nth-child(1){
      margin: 100px 0 60px 0;
      font-family: PingFangSC-Medium;
      font-size: 14px;
      color: #2E2E2E;
      letter-spacing: -0.2px;
    }
    span:nth-child(2){
      font-family: PingFangSC-Regular;
      font-size: 20px;
      color: #2E2E2E;
      line-height: 30px;
      width: 478px;
      margin:0 auto;
      margin-bottom: 74px;
    }
    .message{
      width: 1085px;
      margin-left: 200px;
    }
    .roll-box{
      text-align: center;
      width:227px;
      height:338px;
      border: 1px solid #DBDEDD;
      margin:0 42px 50px 0;
      font-family: PingFangSC-Regular;
      .people-cricle{
        background: #F1EEEB;
        width: 122px;
        height: 122px;
        margin: 50px auto;
        border-radius: 50%;
        span{
          width: 99px;
          height: 99px;
          border-radius: 50%;
          background-color: darksalmon;
          margin: 0px auto;
        }
      }
      .aisbaby{
        width: 63px;
        margin:52px 0 17px 0;
        font-size: 18px;
        color: #2E2E2E;
        margin:0 auto;
        letter-spacing: -0.26px;
      }
      .num{
        font-size: 14px;
        color: #666666;
        letter-spacing: -0.2px;
        margin-top: 17px;
      }
    }
  }
  button{
    display: block;
    width:124px;
    height: 58px;
    background: #282828;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #FFFFFF;
    margin:0 auto;
    margin-bottom: 50px;
  }

</style>
